<template>
    <div class="con">
        <el-col :span="5" style="width: 236px;">
            <el-menu default-active="3" class="zzy" @close="handleClose" background-color="grey" text-color="#000"
                active-text-color="blue">
                <el-menu-item index="1" @click="toUser">
                    <i class="el-icon-menu"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="toWuliu">
                    <i class="el-icon-document"></i>
                    <span slot="title">物流路线管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-setting"></i>
                    <span slot="title">图片管理</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <div style="border: 2px dotted lightblue;width: 800px; height: 500px;margin: 0 auto;">
            <div style="margin-top: 250px;">
                <el-upload class="upload-demo" ref="upload" action="http://localhost:3000/uploadimg" :headers='header'
                    :on-preview="handlePreview" :file-list="fileList" :auto-upload="false" list-type="picture" multiple
                    :on-success="
                        (response, file, fileList) => {
                            return handleSuccess(response, file, fileList);
                        }">
                    <div slot="file" slot-scope="{file}" v-for="(item, index) in fileList " :key="index">
                        <el-table
                            :data="fileList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
                            <el-table-column prop="url" label="图片路径" fixed>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" @click="show(file)">
                            </el-table-column>
                            <el-table-column prop="name" label="图片名称" fixed>
                                <span>name:{{ file.name }}</span>
                            </el-table-column>
                            <el-table-column prop="size" label="图片大小" fixed>
                                <span style="margin-left: 15px;">size:{{ file.size }}</span>
                            </el-table-column>
                            <el-table-column align="center" label="操作">
                                <template lot-scope="scope">
                                    <el-button v-if="!disabled" @click="del(index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-button @click="add()" slot="trigger" size="small" type="primary">选择照片</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
                </el-upload>
                <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size='pageSize'
                    @current-change="currentPage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            dialogVisible: false,
            disabled: false,
            token: "",
            dialogImageUrl: '',
            header: { 'authorization': localStorage["token"] },
            total: '',
            drawer: false,
            fileListInfo: {
                imageId: '',
                name: '',
                size: '',
                id: '',
                url: ''
            },
            pageSizes: [1, 2, 3, 4],
            pageSize: 5,
            totalPage: 1,
            Data: [],
            pageNow: 1,//表格页码
            pagePage: 10,//数据数
            currentNow: 1,//当前页码
        };
    },
    computed: {
        headers() {
            return {
                'Authorization': "Bearer " + this.token
            }
        },
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList);

        },
        // 显示
        async put() {
            let result = await this.$axios.post("http://localhost:3000/putimage");
            this.fileList = result.data.List
        },
        async add() {
            await this.$axios.post('http://localhost:3000/uploadimg',
                {
                    imageId: this.fileListInfo.imageId,
                    name: this.fileListInfo.name,
                    size: this.fileListInfo.size,
                    id: this.fileListInfo.id,
                    url: this.fileListInfo.url
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('添加成功')
                    }
                    if (res.data.code == 400) {
                        alert('图片已存在')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 删
        async del(index) {
            // console.log(fileList);
            await this.$axios.post('http://localhost:3000/delimage',
                {
                    name: this.fileList[index].name
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('删除成功')

                    }
                    if (res.data.code == 202) {
                        alert('删除失败')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        show(file) {
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        // 分页
        //获取前10条数据
        async getData(index) {
            this.pageNow = index || this.pageNow
            await this.$axios.post('http://localhost:8080/pageimage', { page: this.pageNow, pageSize: this.pagePage }).then(res => {
                console.log(res.data.data);
                this.Data = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },
        //当前页数据
        currentPage(currentPage) {
            this.currentNow = currentPage;
            console.log(this.currentNow)
            this.getData(this.currentNow)
        },
        //获取序号
        indexMethod(index) {
            return (this.currentNow - 1) * this.pagePage + index + 1;
        },
        //获取总页数
        getPageTotal() {
            axios.get('http://localhost:8080/getImageData').then(res => {
                console.log(res.data.data);
                this.fileList = res.data.data;
                this.totalPage = Math.ceil(this.fileList.length / this.pagePage) * 10;
                console.log(this.totalPage);
            }).catch(error => {
                console.log(error)
            })
        },
        // getpage() {
        //     fetch("http://localhost:3000/getpage")
        //         .then(res => res.json())
        //         .then(res => {
        //             this.total = res.length * 10;
        //             console.log(this.total);
        //         })
        // },
        toUser() {
            this.$router.push('./user')
        },
        toWuliu() {
            this.$router.push('./wuliu')
        }
    },
    mounted() {

    }
}

</script>
<style>
.con {
    height: 500px;
}

.zzy {
    height: 100%;
}

.djx1 {
    float: right;
    width: 50px;
    height: 30px;
    margin-top: 20px;
}

.placeholder {
    border: 3px dashed #e6e6e6;
    min-height: 238px;
    padding-top: 158px;
    text-align: center;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

.webuploader-pick {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    padding: 10px 18px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
}

.webuploader-pick input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    padding: 10px 18px;
    cursor: pointer;
}

.webuploader-pick:hover {
    border-color: #78C3F3;
    color: red;
    text-decoration: none;
}
</style>